import React, { useState } from "react";
import style from "./style.module.scss";
import agreeIcon from "../../assets/images/icon/common resource/hdpi/common_icon_agree_n.png";
import agreeIcon_active from "../../assets/images/icon/common resource/hdpi/common_icon_agree_s.png";
import disagreeIcon from "../../assets/images/icon/common resource/hdpi/common_icon_disagree_n.png";
import disagreeIcon_active from "../../assets/images/icon/common resource/hdpi/common_icon_disagree_s.png";
import collectionIcon from "../../assets/images/icon/common resource/hdpi/common_button_collection_small_n.png";
import authIcon from "../../assets/images/icon/common resource/hdpi/common_icon_authenticate_n.png";
import inquiryIcon from "../../assets/images/icon/common resource/hdpi/common_icon_inquiry_n.png";
import { adoptionProposal } from "../../api/my";
import { useSearchParams } from "react-router-dom";
import { useAppSelector } from "../../store/hooks";

// 定义 查询我的病友圈帖子的评论 数据类型
interface MySickCircleCommentItem {
  commentId: number;
  commentUserId: number;
  nickNmae: string;
  headPic: string;
  content: string;
  supportNum: number;
  opposeNum: number;
  opinion: number;
  whetherDoctor: number;
  commentTime: number;
}
interface PropsType {
  item: MySickCircleCommentItem;
}

export const MySickCircleCommentItem: React.FC<PropsType> = ({ item }) => {
  const [searchParams] = useSearchParams();
  const sickCircleId = Number(searchParams.get("sickCircleId"));
  const userId = useAppSelector((state) => state.user.userInfo.userId);
  const sessionId = useAppSelector((state) => state.user.userInfo.sessionId);
  const [isAdopt, setIsAdopt] = useState<boolean>(false);
  const adoptComment = async () => {
    const resp = await adoptionProposal(
      item.commentId,
      sickCircleId,
      userId,
      sessionId
    );
    const { status } = resp;
    if (status === "8000") {
      setIsAdopt(true);
    }
  };

  return (
    <div>
      <div className={style.mySickCircleCommentItem}>
        <div className={style.commentUserInfo}>
          <img src={item.headPic} className={style.headerPic} />
          <span className={style.nickName}>{item.nickNmae}</span>
          {item.whetherDoctor && (
            <img src={authIcon} alt="" className={style.authIcon} />
          )}
          {item.whetherDoctor && (
            <img src={inquiryIcon} alt="" className={style.inquiryIcon} />
          )}
        </div>
        <div className={style.commentContent}>{item.content}</div>
        <div className={style.bottom}>
          <div className={style.dateTime}>{item.commentTime}</div>
          <div className={style.operate}>
            <div className={style.agreeBox}>
              <img
                src={item.opinion === 1 ? agreeIcon_active : agreeIcon}
                alt=""
                className={style.agreeIcon}
              />
              <span className={style.supportNum}>{item.supportNum}</span>
            </div>
            <div className={style.disagreeBox}>
              <img
                src={item.opinion === 2 ? disagreeIcon_active : disagreeIcon}
                alt=""
                className={style.disagreeIcon}
              />
              <span className={style.opposeNum}>{item.opposeNum}</span>
            </div>
            {!isAdopt ? (
              <div className={style.collectionBox}>
                <img
                  src={collectionIcon}
                  alt=""
                  className={style.collectionIcon}
                />
                <span className={style.adopt} onClick={() => adoptComment()}>
                  采纳
                </span>
              </div>
            ) : null}
          </div>
        </div>
      </div>
    </div>
  );
};

export default MySickCircleCommentItem;
